<template>
<div>
  <el-card shadow="hover"
    v-for="(item, index) in dataList"
    :key="'discusslist_' + index"
    :id="'discuss_'+ item.ID"
  >
    <template #header>
      <div class="card-header">
        {{item.discusser}}
        <span class="button">({{dateFormat(item.addTime).format('YYYY-MM-DD')}})</span>
      </div>
    </template>
    <!--简介-->
    <div class="text item" v-html="item.concent" :id="'discuss1_'+ item.ID"></div>
    <hr>
    <i class="el-icon-circle-check"></i>&nbsp;{{item.agreeCount}}&nbsp;&nbsp;
  </el-card>
  <!--没有找到数据-->
  <el-empty description="没有讨论呢，抢个沙发呗。" v-if="dataList.length === 0"></el-empty>
  <!--分页-->
  <pager/>
  <!--讨论表单-->
  <discussForm :id="id"/>
</div>
</template>

<script setup>
// 组件
import { ref } from 'vue'
// 组件
import discussForm from '../components/discuss-form.vue'
import pager from '../components/pager.vue'

// 数据列表的状态
import dataListControl from '../control/data-list'

// 日期格式化
const dateFormat = dayjs

// 组件的属性，获取博文ID
const props = defineProps({
  id: String
})

// 获取注册函数和数据容器
const { regDataListState, dataList } = dataListControl('discussList')

// 注册状态，设置博文ID为查询条件，获取博文的讨论数据。
const discussState = regDataListState()
discussState.find.blogId = props.id
discussState.isReload = !discussState.isReload

</script>
